<template>
  <div>
    <a-card class="topBox" :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
        <a-row>
          <a-col :span="14">
            <a-form-model-item label="区域" class="zItem">
              <z-linkage-area placeholder="请选择行政区划" v-model="provinceCityAreaCodeArr" @change="setAdminDivisions" />
            </a-form-model-item>
          </a-col>
          <a-col :span="6">
            <a-form-model-item label="对接人">
              <a-input v-model="pageFilter.dockingName" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="4">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button style="margin-left: 10%" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="onAdd">新增对接地址信息</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="false" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange">
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="onEdit(record)" type="link" style="padding: 0">编辑</a-button>
            <a-divider type="vertical" />
            <a-button @click="onDelete(record)" type="link" style="padding: 0">删除</a-button>
          </template>
        </z-table>
      </div>
      <AddCheckModal ref="addCheckModalId" :title="title" @ok=onQuery />
    </a-card>
  </div>
</template>

<script>
import Vue from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import * as adressApi from '@/api/sjsk/check/adress.js'
import AddCheckModal from '@/views/sjsk/checkManage/uroscopy/modules/AddCheckModal'
export default {
  components: {
    AddCheckModal
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      loading: false,
      reloading: false,
      title: "添加检测对接信息",
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '检测地点',
          dataIndex: 'provinceCityAreaName',
          align: 'center',
        },
        {
          title: '详细地址',
          dataIndex: 'detectCityAreaAddress',
          align: 'center',
        },
        {
          title: '对接人',
          dataIndex: 'dockingName',
          align: 'center',
        },
        {
          title: '联系电话',
          dataIndex: 'dockingPhone',
          align: 'center',
        },
        {
          title: '操作',
          width: 150,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {},
      provinceCityAreaCodeArr: [],
      dockingId: ""
    }
  },
  created() {
    let user = Vue.ls.get(USER_INFO)
    this.dockingId = user.id
  },
  async mounted() {
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.provinceCityAreaCodeArr = []
      this.refreshTable()
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      this.pageFilter.dockingId = this.dockingId
      adressApi.list(this.pageFilter).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 获取行政区划的值
    setAdminDivisions(value) {
      // console.log("1111")
      this.pageFilter.provinceCityAreaCode = value.join()
      // console.log(this.pageFilter.provinceCityAreaCode)
    },
    onAdd() {
      this.title = "添加检测对接信息"
      this.$refs.addCheckModalId.show()
    },
    onEdit(record) {
      this.title = "编辑检测对接信息"
      this.$refs.addCheckModalId.show(record)
    },
    onDelete(record) {
      let that = this;
      this.$confirm({
        title: `确定要删除该记录吗？`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          adressApi.deleteTestNoticeRecord({ id: parseInt(record.id) }).then((res) => {
            that.$message.success(res.message);
            if (res.success) {
              that.onQuery();
            }
          });
        }
      });
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.topBox /deep/.ant-row {
  margin-bottom: 0;
}

.zItem {
  /deep/.ant-col-4 {
    width: 6%;
  }

  /deep/.ant-col-18 {
    width: 89%;
  }
}
</style>
